<template>
	<view class="wid90 mar">
		<!-- <view style="height: 20rpx;"></view> -->
		<!-- <view v-if="type == 'SIGN_SIGNATURE'" class="dis disAl disJuB hei80 foSi30">
			<view style="width: 30%;">{{title}}</view>
			<input class="wid100" style="width: 70%;text-align: right;" :value="value" :placeholder="'请输入'+title"
				@input="shuInput" />
		</view> -->
		<view v-if="type == 'FILL_IMAGE'" class="dis disAl disJuB foSi30" style="min-height: 80rpx;">
			<view style="width: 30%;">{{title}}</view>
			<image v-if="value" :src="value" class="borRad10" style="width: 140rpx;height: 140rpx;" @click="upImage()">
			</image>
			<view v-if="!value" class="dis disAl disJuC borRad10 bacFFF box1" style="width: 140rpx;height: 140rpx;"
				@click="upImage()">
				<image src="https://www.sign.run/applet/static/wode/shangchuan.png" style="width: 68rpx;height: 65rpx;"></image>
			</view>
		</view>
		<view v-if="type == 'MULTI_LINE_TEXT'" class="dis disJuB foSi30" style="min-height: 80rpx;">
			<view style="width: 30%;">{{title}}</view>
			<textarea class="wid100" style="width: 70%;height: 160rpx;" :value="value" :placeholder="'请输入'+title"
				@input="shuInput" />
		</view>
		<view v-if="type == 'TEXT'" class="dis disAl disJuB hei80 foSi30">
			<view style="width: 30%;">{{title}}</view>
			<input class="wid100 inpEnd" :value="value" :placeholder="'请输入'+title"
				@input="shuInput" />
		</view>
		<view v-if="type == 'CHECK_BOX'" class="dis disAl disJuB hei80 foSi30">
			<view>{{title}}</view>
			<checkbox :value="value" @click="checkboxClick"></checkbox>
		</view>
		<view v-if="type == 'SIGN_DATE'" class="dis disAl disJuB hei80 foSi30">
			<view style="width: 30%;">{{title}}</view>
			<picker mode="date" style="width: 70%;" :value="value" @change="bindDateChange">
				<view style="text-align: right;" :style="value?'':'color: #6E6E6E;'">{{value?value:'请选择'+title}}</view>
			</picker>
		</view>
		<view v-if="type == 'DISTRICT'" class="dis disAl disJuB hei80 foSi30">
			<view style="width: 30%;">{{title}}</view>
			<picker mode="region" style="width: 70%;" @change="bindTimeChange">
				<view style="text-align: right;" :style="value?'':'color: #6E6E6E;'">{{value?value:'请选择'+title}}</view>
			</picker>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'formInput',
		props: {
			component: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: ''
			},
			index: {
				type: Number,
				default: 0
			},
			value: {
				type: String,
				default: ''
			},

		},
		data() {
			return {
				// 判断是否还在继续输入
				timer: null,
			};
		},
		methods: {
			shuInput(e) {
				if (this.timer !== null) clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.$emit('indexInput', e.target.value, this.index, this.component)
				}, 500)
			},
			checkboxClick() {
				var value = this.value ? this.value : false
				this.$emit('indexInput', value, this.index, this.component)
			},
			// 获取日期
			bindDateChange(e) {
				this.$emit('indexInput', e.detail.value, this.index, this.component)
			},
			// 获取省市区
			bindTimeChange(e) {
				var provinceName = e.detail.value[0] + '-' + e.detail.value[1] + '-' + e.detail.value[2];
				this.$emit('indexInput', provinceName, this.index, this.component)
			},
			upImage() {
				var that = this
				uni.chooseImage({
					count: 1, //上传图片的数量，默认是9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						const tempFilePaths = res.tempFilePaths; //拿到选择的图片，是一个数组
						that.$emit('indexInput', res.tempFilePaths[0], that.index, that.component)
						// that.shangchuan(tempFilePaths)
					}
				});
			},
			shangchuan(tempFilePaths) {
				var that = this
				uni.uploadFile({
					url: that.global.url + '/api/common/upload',
					header: {
						"token": uni.getStorageSync('token'),
					}, //请求token	
					filePath: tempFilePaths[0],
					name: 'file',
					success: (res) => {
						var apiresult = JSON.parse(res.data)
						if (apiresult.code == 1) {
							console.log(apiresult.data.url);
							that.$emit('indexInput', apiresult.data.url, that.index, that.component)
						} else {
							uni.showToast({
								title: apiresult.msg,
								icon: 'error',
								duration: 2000
							})
						}
					},
					fail() {
						uni.showToast({
							title: "网络连接失败",
							icon: 'error',
							duration: 2000
						})
					}
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.inpEnd{
		width: 70%;
		text-align: right;
	}
	.inpEnd:after{
		content: '';
		width: 70%;
		display: inline-block;
	}
</style>